.home_container {
  padding-bottom: 67px;
  height: 100%;
  background-image: url("@/assets/images/home/background.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  text-align: center;

  .home_main_title {
    font-size: 40px;
    font-weight: bolder;
    padding: 100px 0;
    text-align: center;
  }

  .feature_boxes {
    display: flex;
    justify-content: center;
    text-align: center;
    gap: 36px;

    .feature_box {
      width: calc(25vw - 72px);
      position: relative;
      padding: 32px 0;
      z-index: 0;

      .feature_box_back,
      .feature_box_back_hover {
        width: calc(25vw - 72px);
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        transition: opacity 0.25s ease;
        z-index: -1;
      }

      .feature_box_back {
        opacity: 1;
      }

      .feature_box_back_hover {
        opacity: 0;
      }

      .feature_title {
        font-size: 22px;
        font-weight: bolder;
        width: max-content;
        margin: 0 auto;
        position: relative;
      }

      .feature_title::after {
        content: "";
        display: block;
        width: 100%;
        height: 4px;
        background: linear-gradient(to right, #77aef700 0%, #77aef7ff 35%, #77aef7ff 65%, #77aef700 100%);
        opacity: 0;
        transition: opacity 0.25s ease;
      }

      .feature_items {
        margin-top: 32px;
        display: flex;
        flex-direction: column;
        gap: 36px;
        line-height: 22px;

        .feature_item {
          position: relative;

          img {
            width: 96px;
            height: 96px;
          }

          .feature_name {
            margin-top: 12px;
            font-size: 16px;
            font-weight: bolder;
          }

          .feature_desc {
            margin-top: 4px;
            font-size: 14px;
            color: #89939bff;
          }

          .feature_link {
            opacity: 0;
            margin-top: 4px;
            font-size: 14px;
            transition: opacity 0.25s ease;
            color: #89939bff;

            a {
              font-size: 14px;
              text-decoration: none;
              color: #156ac4;
            }
          }
        }

        .feature_item::before {
          content: "";
          display: block;
          background-image: url("@/assets/images/home/featureFrame.png");
          background-size: 100% 227px;
          background-repeat: no-repeat;
          position: absolute;
          width: calc(0.5 * 326px);
          opacity: 0;
          height: 227px;
          left: calc((366px - 0.5 * 326px) / 2);
          top: -16px;
          z-index: -1;
          transition: left 0.25s ease, width 0.25s ease, opacity 0.25s ease;
        }

        .feature_item:hover::before {
          width: calc(100% - 42px);
          left: calc((366px - 326px) / 2);
          opacity: 1;
        }

        .feature_item:hover .feature_link {
          opacity: 1;
        }

      }

    }

    .feature_box:hover {
      .feature_box_back_hover {
        opacity: 1;
      }
    }

    .feature_box:hover .feature_title::after {
      opacity: 1;
    }

    .feature_box:not(:last-child)::after {
      content: "";
      background-image: url("@/assets/images/home/arrow.png");
      width: 18px;
      height: 32px;
      display: block;
      position: absolute;
      top: 50%;
      left: 92%;
    }
  }
}

@media screen and (min-width: 2380px) {
  .home_container{
    .feature_boxes{
      .feature_box {
      .feature_items{
        .feature_item {
          img{
            width: 8.36rem;
            height: 8.6rem;
          }
          .feature_name{
            margin-top: 1.2rem;
          }
          .feature_desc{
            margin-top: 0.8rem;
          }
          .feature_link{
            margin-top: 0.8rem;
          }
        }
      }
    } 
    .feature_box:not(:last-child)::after{
      width: 1.8rem;
      height: 3.2rem;
      background-repeat: no-repeat;
    }
  }
  }
}